import { Modal,Row,Col } from 'antd'


const Preview = (props) => {
  const renderDom = (item) => {
    switch(item.fieldType){
      case 'cols':
        return(
          <Row>
            {
              item.colList.map((colItem,index) => {
                return (
                  <Col span={colItem.span} key={colItem.key} style={{textAlign:colItem.textAlign}}>
                    {
                      colItem.fieldList.map((childItem,childIndex) => {
                        return renderDom(childItem,childIndex)
                      })
                    }
                  </Col>
                )
              })
            }
          </Row>
        )
        case 'picture':
        return(
          <img 
            key={item.id}
            src={item.src} 
            style={{
              ...item.styles,
              width:item.styles.width + 'px',
              height:item.styles.height + 'px',
              marginTop:item.styles.marginTop+'px',
              marginBottom:item.styles.marginBottom+'px',
              marginLeft:item.styles.marginLeft+'px',
              marginRight:item.styles.marginRight+'px',
            }} 
            id={item.id}
            data-id={item.id}
            className="hoverStyle"
          />
        )
      case 'tag':
        return(
          <span
            style={{
              ...item.styles,
              width:item.styles.width + 'px',
              height:item.styles.height + 'px',
              marginTop:item.styles.marginTop+'px',
              marginBottom:item.styles.marginBottom+'px',
              marginLeft:item.styles.marginLeft+'px',
              marginRight:item.styles.marginRight+'px',
              borderRadius:item.styles.borderRadius+'px',
              fontSize:item.styles.fontSize+'px',
              lineHeight:item.styles.lineHeight + 'px',
            }}
            key={item.id}
          >
            {item.text}
          </span>
          
        )
      case 'text':
      case 'api':
      case 'form':
        return(
          <span
            style={{
              ...item.styles,
              fontSize:item.styles.fontSize+'px',
              marginTop:item.styles.marginTop+'px',
              marginBottom:item.styles.marginBottom+'px',
              marginLeft:item.styles.marginLeft+'px',
              marginRight:item.styles.marginRight+'px',
            }}
            key={item.id}
          >
            {item.text}
          </span>
        )
    }
  }
  return(
    <Modal
      title='预览卡片'
      visible={props.visible}
      footer={null}
      onCancel={props.doCancelPreview}
    >
      <div style={{background:props.cardBg,padding:10,borderRadius:6,border:'1px solid',borderColor:props.borderColor}}>
        {
          props.fieldList.map(item => {
            return (renderDom(item))
          })
        }
      </div>
    </Modal>
  )
}

export default Preview